react-redux のconnectメソッドは4つの Generic Type を受け取れます。例えばconnectを以下のように使った場合、
mapStateToProps だけの場合
connect(state => state)(class extends React.Component<{foo: string}> {/* ... */})d.tsに書かれているこの型が適用されます。
<
TStateProps = {},
no_dispatch = {},
TOwnProps = {},
State = {}
>(
mapStateToProps: MapStateToPropsParam
): InferableComponentEnhancerWithProps; TStatePropsこれは Redux の State からコンポーネントへ props として渡す props の型。つまりstate => stateのように書いた場合 Redux の State と同じものになります。no_dispatch上記のはmapDispatchToPropsが無いので{}を渡します。TOwnPropsはラップされるコンポーネントの props を渡します。Stateは Redux の State そのままです。
例えば、上記の使い方で State が{hoge: number}であれば、
connect(state => state)(
class extends React.Component<{foo: string}> {/* ... */}
); となります。
mapDispatchToProps と一緒の場合
上記のno_dispatchがTDispatchPropsに変わりました。これはTStatePropsのようにこのconnect関数の中のmapDispatchToPropsの戻り値の型を指定します。
<
TStateProps = {},
TDispatchProps = {},
TOwnProps = {},
State = {}
>(
mapStateToProps: MapStateToPropsParam,
mapDispatchToProps: MapDispatchToPropsNonObject
): InferableComponentEnhancerWithProps; 例えば以下のようなprops.increment関数があるコンポーネントがあります。そしてそれはconnectの第二引数であるmapDispatchToPropsで定義している関数である場合このようになります。connectからコンポーネントに渡すprops型もReact.Componentに追加する必要があります。
connect(
state => state,
dispatch => {
return {
increment() {/* ... */}
}
})
(
class extends React.Component<{foo: string} & {increment(): void}> {/* ... */}
); 
